<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>地图示例</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .wrapper {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
        }

        .map_container {
            flex-grow: 1;
            display: flex;
        }

        .search {
            width: 200px;
        }

        #map {
            flex-grow: 1;
        }

        .group {
            height: 50px;
            line-height: 50px;
            text-align: center;
        }

        .list>li {
            cursor: pointer;
        }
    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>

<body>
    <div class="wrapper">
        <div class="map_container">
            <div class="search">
                <input type="text" placeholder="请输入搜索信息" class='value'>
                <ul class="list"></ul>
            </div>
            <div id="map"></div>
        </div>

        <div class="group">
            <button type="button" class="btn btn-default" onclick="handle.add()">添加控件</button>
            <button type="button" class="btn btn-default" onclick="handle.remove()">移出控件</button>
            <button type="button" class="btn btn-success" onclick="handle.distance()">测距</button>
            <button type="button" class="btn btn-primary" onclick="handle.addCover()">显示小区</button>
            <button type="button" class="btn btn-primary" onclick="handle.removeCover()">隐藏小区</button>
            <button type="button" class="btn btn-info" onclick="handle.addPolygen()">显示区域</button>
            <button type="button" class="btn btn-info" onclick="handle.removePolygen()">隐藏区域</button>
            <button type="button" class="btn btn-warning" onclick="handle.addHot()">显示热力图</button>
            <button type="button" class="btn btn-warning" onclick="handle.removeHot()">隐藏热力图</button>
            <!-- 绑定移动端点击事件 -->
            <button type="button" class="btn btn-warning" onclick="handle.addCircle()">显示圆圈覆盖物</button>
            <button type="button" class="btn btn-warning" onclick="handle.removeCircle()">隐藏圆圈覆盖物</button>
        </div>
    </div>




    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        crossorigin="anonymous"></script>
    <!-- 房小二 -->
    <script type="text/javascript"
        src="https://api.map.baidu.com/api?v=2.0&ak=QcjndwPs1WR8gSTsr6TCz2NAfofGry6i"></script>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        crossorigin="anonymous"></script>
    <!-- 测距 -->
    <script type="text/javascript"
        src="https://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>
    <!-- 热力图 -->
    <script type="text/javascript" src="https://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
    <!-- 移动端点击事件 -->
    <script type="text/javascript"
        src="https://api.map.baidu.com/library/EventWrapper/1.2/src/EventWrapper.js"></script>

    <!-- json -->
    <script src="./json/xq.json"></script>
    <script src="./json/area.json"></script>
    <script src="./json/hot.json"></script>
    <script src="./json/circle.json"></script>
    
    <script type="text/javascript" src="./map.js"></script>
</body>

</html>